<template>
  <div class="container">
    <FilterNavbar v-model:queryParam="queryParam" :searchList="searchList" @confirm="onFilterNavbarConfirm">
      <template #center>
        <view class="order-type-list">
          <view
            class="order-type-item"
            :class="[item.active ? 'order-type-item-active' : '']"
            v-for="(item, index) in orderTypeList"
            :key="index"
            @tap="orderTypeClickFn(item)"
          >
            {{ item.label }}
            <view class="order-type-item-border"></view>
          </view>
        </view>
      </template>
    </FilterNavbar>
    <template v-if="permission.shortOrder || permission.longOrder">
      <view class="page-filter">
        <ve-search-bar
          placeholder="请输入姓名/手机号"
          v-if="topTabsActive == 1"
          v-model="queryParam.memberNamePhoneLike"
          @search="searchBarSearch"
        ></ve-search-bar>
        <ve-search-bar placeholder="请输入企业名称" v-else v-model="queryParam.clientNameLike" @search="searchBarSearch"></ve-search-bar>
        <ve-tabs :actived="0" v-if="topTabsActive == 1" :list="tabs" @change="tabsChange" />
      </view>

      <!-- 个人会员 -->
      <member ref="member" :nameOrPhone="nameOrPhone" :status="status" v-if="topTabsActive == 1 && permission.shortOrder" />
      <!-- 企业会员 -->
      <client-info ref="client" :clientName="clientName" v-if="topTabsActive == 2 && permission.longOrder" />
    </template>

    <ve-empty v-else class="auth-empty" :marginTop="0" type="auth" text="暂未开通服务" />
  </div>
</template>

<script setup>
  import { ref, onMounted, computed } from 'vue'
  import Member from './member/index.vue'
  import ClientInfo from './clientInfo/index.vue'
  import FilterNavbar from '@/components/FilterNavbar'
  import { userStore } from '@/stores'
  import { appConfig } from '@/config/index.js'
  import { usePageDict } from '@/hooks/useDict'
  const dict = usePageDict('contractEnums')
  const member = ref(null)
  const client = ref(null)
  // 权限
  const permission = ref({
    load: false,
    shortOrder: false,
    longOrder: false,
  })
  const searchList = computed(() => {
    return [
      {
        prop: 'ecAuthenticationStatus',
        label: '电子合同认证状态',
        type: 'picker',
        attrs: {
          options: dict.IdentStatusEnum,
        },
      }
    ]
  })
  const onFilterNavbarConfirm = (params) => {
    queryParam.value = {
      ...queryParam.value,
      ...params,
    }
    console.log(params)
    if (topTabsActive.value == 1) {
      member.value.getData(params)
    } else {
      client.value.getData(params)
    }
  }
  const userInfoStore = userStore()
  userInfoStore.setEpDetail().then(() => {
    // 商户的长短租权限
    const epShortOrderPermission = userInfoStore.epServiceIncludeShortOrder
    const epLongOrderPermission = userInfoStore.epServiceIncludeLongOrder
    // 用户的长短租权限
    const permissions = userInfoStore.permissons
    let userShortOrderPermission = true
    let userLongOrderPermission = true
    if (appConfig.asyncRoutes == true) {
      if (permissions.includes('svmsapp:member-person') == false) {
        userShortOrderPermission = false
      }
      if (permissions.includes('svmsapp:member-enterprise') == false) {
        userLongOrderPermission = false
      }
    }
    permission.value.shortOrder = epShortOrderPermission && userShortOrderPermission
    permission.value.longOrder = epLongOrderPermission && userLongOrderPermission
    // 权限加载完成
    permission.value.load = true
  })

  const tabs = ['全部', '正常', '已拉黑']
  // 查询参数
  const queryParam = ref({})
  // 长短租订单 tab
  const orderTypeList = ref([
    { label: '个人会员', active: true },
    { label: '企业客户', active: false },
  ])
  const topTabsActive = ref(1)
  // 顶部 tab 点击
  const orderTypeClickFn = (item) => {
    orderTypeList.value.forEach((item) => (item.active = false))
    item.active = true
    if (item.label == '个人会员') {
      topTabsActive.value = 1
      queryParam.value = {}
    } else {
      topTabsActive.value = 2
      queryParam.value = {}
    }
  }

  const nameOrPhone = ref('')
  const clientName = ref('')
  const searchBarSearch = (e) => {
    console.log(e)
    if (topTabsActive.value == 1) {
      nameOrPhone.value = e
    } else {
      clientName.value = e
    }
  }

  const status = ref('')
  const tabsChange = (e) => {
    status.value = e
  }

  onMounted(() => {})
</script>

<style lang="scss" scoped>
  .container {
    height: 100vh;
  }
  .order-type-list {
    display: flex;
    .order-type-item {
      width: 192rpx;
      height: 86rpx;
      text-align: center;
      font-size: 32rpx;
      color: #1d2129;
      position: relative;
      .order-type-item-border {
        width: 48rpx;
        height: 4rpx;
        background: transparent;
        border-radius: 4rpx;
        position: absolute;
        bottom: -2rpx;
        left: 50%;
        margin-left: -24rpx;
      }
    }
    .order-type-item-active {
      color: #3072f6;
      .order-type-item-border {
        background: #3072f6;
      }
    }
  }
</style>
